<template>
  <el-card v-loading="loading"
           shadow="never"
           :style="{height: gadgetHeight + 'px', 'overflow': 'hiden','border-radius': '4px','padding-top':'60px'}"
           class="aui-card--fill">
    <template>
      <div @mouseenter="showStep=true" @mouseleave="showStepfalse"  style="color:#fff;backgroundColor:#2693FF;border-radius:4px">
        <div style="height:102px;display:flex;align-items:center;padding:16px;">
          <el-progress color="#fff" :width="70" type="circle" :percentage="percentage"></el-progress>
          <div style="margin-left:16px">
            <div style="font-size: 16px;line-height: 24px;"><span>Get Start</span><span style="margin-left:10px" class="cuifont icon_right_arrow_alt"></span></div>
            <div style="margin-top:4px;font-size: 12px;line-height: 16px;">{{dataSource.filter(item=>item.status === 'done').length}} steps to get you up and running.</div>
          </div>
        </div>
        <div v-if="showStep" style="padding-left:20px;margin-top:20px" class="cui-custom-css-get-started">
          <el-steps space="44px" :active="nowSteps" direction="vertical">
            <el-step v-for="(item, index) in dataSource"
                    :key="item.id"
                    :status="item.status === 'done'?'finish':'wait'"
                    :class="nowSteps === index?'is-active':''"
                    style="color:#fff;margin-left:10px;cursor:pointer;"
                    @click.native="openDialog(index)">
              <div slot="icon" :class="item.status === 'done'?'cuifont icon_yes':'cuifont icon_no'" style="color:#fff"></div>
              <template slot="title">
                <div :style="{'text-decoration':item.status === 'done'?'line-through':'','font-size': item.status === 'done'?'16px':'16px','color': item.status === 'done'?'#fff':' rgba(255, 255, 255, 0.8)','margin-left':'10px'}">
                  {{ item.name }}
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </template>

    <featured-appList ref="featured-appList"></featured-appList>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"  :slicer='slicer'/>
  </el-card>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import featuredAppList from '@/components/card-apps-components/featured-appList.vue'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { featuredAppList, model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      showStep: false,
      dataSource: [],
      gadgetSetting: null,
      loading: false,
      nowSteps: this.$store.state.GetStarted.steps,
      getStartedDialogStatus: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {
            backgroundImageUrl: this.$ossLink + '/app/other/home-getstarted-background.png',
            titleText: 'Welcome to MSPbots!',
            titleColor: '#FFFFFF',
            titleFontSize: '18px',
            contentText: 'MORE AUTOMATION·MORE PROFIT',
            contentColor: '#FFFFFF',
            contetnFontSize: '12px',
            buttonText: 'Home',
            buttonColor: '#666666',
            buttonBackground: '#FFFFFF',
            buttonWidth: '80px',
            buttonRouter: '/Home'
          }
        }
      }
    }
  },
  computed: {
    percentage () {
      var done = this.dataSource.filter(item => item.status === 'done').length
      return Math.floor(done * 100 / this.dataSource.length)
    },
    hasUndoneStatus () {
      return Boolean(this.dataSource.findIndex(e => e.status === 'undone') !== -1)
    },
    comShowSetting () {
      try {
        if (this.gadgetSetting.backgroundImageUrl) {
          return this.gadgetSetting
        } else {
          return this.queryModelDefaultSetting.dataInfo.gadgetSetting
        }
      } catch (error) {
        return this.queryModelDefaultSetting.dataInfo.gadgetSetting
      }
    }
  },
  mounted () {
    this.tabSelect({ tab: false, text: 'sort' })
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    // this.query()
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.subscribeMessage('runReport', this.query)
    this.afterRegistShowGetStarted()
    this.$store.state.isWidget = false
  },
  methods: {

    addToMyApp (item) {
      this.$confirm(this.$t('custom.apps.add'), this.$t('custom.apps.warning'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        // type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        if (this.$refs.infoDialogBox) {
          this.$refs.infoDialogBox.resetDialog()
        }
        this.doAddToMyApp(item)
      }).catch(() => {
      })
    },
    doAddToMyApp (item) {
      let _self = this
      _self.loading = true
      var params = {
        appId: item.appId,
        all: false,
        tenantList: null
      }
      _self.$interface.reports.postAddToMyAppsApi(params)
        .then(({ data: res }) => {
          _self.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.getMyAppsList()
          this.getfeaturedAppList()
          return this.$message.success(res.msg)
        })
        .catch(() => { })
    },
    showStepfalse () {
      if (this.dataSource.some(item => item.status !== 'done')) {
        return
      }
      this.showStep = false
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    },
    query () {
      this.loading = true
      this.dataSource = this.$store.state.GetStarted.configList
      if (this.dataSource.some(item => item.status !== 'done')) {
        this.showStep = true
      }
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id
      }
      this.$interface.reports.getReportDataInfo(param)
        .then(({ data: res }) => {
          _self.verifyHasData(res)
          if (res.config) {
            _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
            // _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
            // if (_self.autoRefresh) {
            //   this.computedSyncTimer()
            // }
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    },
    openDialog (e) {
      this.$store.state.GetStarted.dialogStatus = true
      this.$store.state.GetStarted.steps = e
    },
    afterRegistShowGetStarted () {
      if (window.location.pathname === '/home') {
        let steps = this.$getQuery('getStartedSteps')
        if (steps || steps === '0') {
          this.openDialog(Number(steps))
          return false
        }
        // if (this.dataSource[0].status === 'undone') {
        const hasUndoneSteps = this.dataSource.findIndex(e => e.status === 'undone')
        if (hasUndoneSteps !== -1) {
          this.openDialog(hasUndoneSteps)
        }
      }
    },
    goToUrl () {
      window.open('https://mspbots.ai/', '_blank')
      // if (url.includes('http')) {
      //   window.open(url, '_blank')
      // } else {
      //   this.$router.push({ path: url })
      // }
    }
  }

})
</script>

<style lang="scss" scoped>
::v-deep .el-progress-circle__track {
    stroke: #5caeff;
}
.cursor {
  cursor: pointer;
}
::v-deep .el-step__icon {
  background-color: transparent;
}
::v-deep .el-progress__text {
  color:#fff;
}
.el-card {
  background-color:transparent;
  border: 0;
}
.image-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &-btn {
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 14px;
    }
  }
}

.aui-card--fill{
  ::v-deep .el-card__body{
    padding-right: 0;
    padding-top: 32px;
  }
}
</style>
